import 'package:flutter/material.dart';
import 'package:flutter_base_plugin/flutter_base_plugin.dart';
import 'package:flutter_base_plugin_example/page/category/vm/categoty_view_model.dart';

import '../../config/k_color.dart';
import '../../models/category_model.dart';

/// @author:  JoeKai
/// @date 2022/6/27 10:40
/// @explain：

// ignore: camel_case_types
class CategoryRight extends StatelessWidget {
  CategoryRight({Key? key}) : super(key: key);

// 全部列表 记录的位置
  GlobalKey? dataKey = GlobalKey();

  CategoryViewModel? viewModel;

  @override
  Widget build(BuildContext context) {
    viewModel = context.watch<CategoryViewModel>();
    // 这个就是ui绘制完成后回调 在绘制完成后显示指定条目
    WidgetsBinding.instance.addPostFrameCallback((callback) {
      if (dataKey != null && dataKey!.currentContext != null) {
        // 显示指定条目
        Scrollable.ensureVisible(dataKey!.currentContext!,
            alignment: 1,
            duration: Duration(milliseconds: 500),
            curve: Curves.ease);
      }
    });

    // TODO: implement build
    return Expanded(
      flex: 1,
      child: Container(
        height: double.infinity,
        color: KColors.white,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: viewModel!.dataList.map((info) {
              return _buildListItem(info);
            }).toList(),
          ),
        ),
      ),
    );
  }

  Widget _buildListItem(CategoryModel model) {
    return Container(
      key: model.id == viewModel!.select ? dataKey : null,
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(20.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 2.h,
                  width: 80.w,
                  color: KColors.tf1f1f1,
                  margin: EdgeInsets.only(right: 40.w),
                ),
                Text("${model.cateName}"),
                Container(
                  height: 2.h,
                  width: 80.w,
                  color: KColors.tf1f1f1,
                  margin: EdgeInsets.only(left: 40.w),
                ),
              ],
            ),
          ),
          Container(
              child: GridView.builder(
                shrinkWrap: true,
                //解决无限高度问题
                physics: const NeverScrollableScrollPhysics(),
                //禁用滑动事件
                padding: const EdgeInsets.all(0),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                ),
                itemCount: model.children!.length,
                itemBuilder: (context, childIndex) {
                  return _buildItem(model.children![childIndex]);
                },
              ))
        ],
      ),
    );
  }

  _buildItem(CategoryChildren item) {
    return InkWell(
      onTap: () {},
      child: Container(
        // padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Image.network(
              "${item.pic}",
              width: 70.h,
              height: 70.h,
              fit: BoxFit.fill,
            ),
            SizedBox(
              height: 10.h,
            ),
            Container(
              height: 28.h,
              child: Text("${item.cateName}"),
            )
          ],
        ),
      ),
    );
  }
}
